<script setup lang="ts">
import type { DrawerInstance } from '@arco-design/web-vue'
import { useWindowSize } from '@vueuse/core'
import { ref, useAttrs, useSlots } from 'vue'

defineOptions({
  name: 'ProDrawer',
  inheritAttrs: false,
})

withDefaults(defineProps<{
  loading?: boolean
  maxWidth?: number
}>(), {
  loading: false,
  maxWidth: 630,
})

const attrs = useAttrs()
const slots = useSlots()
const drawerRef = ref<DrawerInstance | null>(null)
const { width } = useWindowSize()

defineExpose({ drawerRef })
</script>

<template>
  <a-drawer
    ref="drawerRef"
    class="pro-drawer"
    :width="width >= maxWidth ? maxWidth : '100%'"
    v-bind="attrs"
  >
    <a-spin :loading="loading" tip="数据获取中..." style="width: 100%; height: 100%;">
      <template v-for="key in Object.keys(slots)" :key="key" #[key]="scoped">
        <slot :key="key" :name="key" v-bind="scoped" />
      </template>
    </a-spin>
  </a-drawer>
</template>

<style lang="less" scoped>
</style>
